import React, { PureComponent } from 'react'
import { SwitchTransition, CSSTransition } from 'react-transition-group'
import { Button } from 'antd'
import './switchTransition.css'

export default class switchTransitiondemo extends PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      isOn: true,
    }
  }
  render() {
    const { isOn } = this.state
    return (
      <>
        <SwitchTransition>
          <CSSTransition key={isOn ? 'on' : 'off'} classNames='btn' timeout={500}>
            <Button type='primary' onClick={() => this.setState({ isOn: !isOn })}>
              {isOn ? 'on' : 'off'}
            </Button>
          </CSSTransition>
        </SwitchTransition>
      </>
    )
  }
}
